/**
* @title: 我的报名页
* @description:
* @author JUN
*/



<template>
	<div class="orders">
		<div class="orders_1">
			<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"
			empty-text>
				<template slot="empty">
					<div class="noCart">
						暂无报考
						<router-link :to="{path:'./home'}">
							<span>去报考</span>
						</router-link>
					</div>
				</template>
				<el-table-column prop="id" label="序号" width="50" align="center">
				</el-table-column>
				<el-table-column prop="name" label="考试名称" width="150" align="center">
				</el-table-column>
				<el-table-column prop="date" label="日期" width="110" align="center">
				</el-table-column>
				<el-table-column prop="atNumber" label="准考证号" width="150" align="center">
				</el-table-column>
				<el-table-column prop="cost" label="报名费" width="70" align="center">
				</el-table-column>
				<el-table-column prop="regTime" label="报名时间" width="110" align="center">
				</el-table-column>
				<el-table-column prop="payTime" label="缴费时间" width="110" align="center">
				</el-table-column>
				<el-table-column prop="totalScore" label="总分" width="60" align="center">
				</el-table-column>
				<el-table-column prop="passGrade" label="通过成绩" width="100" align="center">
				</el-table-column>
				<el-table-column prop="score" label="考生得分" width="80" align="center">
				</el-table-column>
				<el-table-column prop="passingSituation" label="通过情况" width="80" align="center">
				</el-table-column>
				<el-table-column prop="status" label="状态" width="80" align="center">
				</el-table-column>
				<el-table-column fixed="right" prop="s" label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-button 
						type="primary" size="mini" 
						v-if="scope.row.status=='未审核' || scope.row.status=='未缴费' || scope.row.status=='已缴费'">
							查看报名表
						</el-button>
						<el-button type="warning" size="mini" v-if="scope.row.status=='未缴费'">缴费</el-button>
						<router-link :to="{path:'./ticket'}" v-if="scope.row.status=='待考试'">
							<el-button type="warning" size="mini">查看准考证</el-button>
						</router-link>
						<el-button type="warning" size="mini" v-if="scope.row.passingSituation=='已通过'">查看证书</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="order">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			layout="total,prev, pager, next, jumper" :total="this.tableData.length" background>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: 1,
				pageSize: 8,
				tableData: [
					{
						id: 1,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '根据学校定',
						score: '',
						passingSituation: '',
						status: '未审核',
					}, {
						id: 2,
						date: '2017-05-02',
						name: '英语A/B级',
						atNumber: '12345678',
						cost: '16',
						regTime: '2017-03-21',
						payTime: '2017-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '未缴费',
					}, {
						id: 3,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '已通过',
						status: '已完成',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '已完成',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '待考试',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '已缴费',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '未审核',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						tNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '未审核',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '未审核',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '未审核',
					}, {
						id: 4,
						date: '2016-05-02',
						name: '英语四/六级',
						atNumber: '12345678',
						cost: '100',
						regTime: '2016-03-21',
						payTime: '2016-03-21',
						totalScore: "100",
						passGrade: '60',
						score: '-',
						passingSituation: '-',
						status: '已缴费',
					}
				]
			}
		},
		methods: {
			handleSizeChange: function(size) {
				this.pageSize = size;
				console.log(this.pageSize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
			},
		},
	}
</script>

<style lang="scss" scoped>
	.orders {
		width: 100%;
		margin-top: 50px;
		display: flex;
		flex-direction: column;
		height: 600px;

		// flex: 1;
		.orders_1 {
			flex: 1;
			width: 90%;
			margin: 0 auto;
			.noCart{
				span{
					color: blue;
				}
			}
		}

		.order {
			margin: 0 auto;
		}
	}
</style>
